<script lang="ts" setup>
import { ref, computed, PropType } from 'vue';
import { CircleClose } from '@element-plus/icons-vue';

const props = defineProps({
    modelValue: { // 主要数据用于回传显示
        type: [String, Array<string>] as PropType<string | string[]>,
        default: [],
    }
});

const emit = defineEmits<{
    (e: 'update:modelValue', value: string | string[]): void

}>();

const getAllImageList = computed(() => typeof props.modelValue == 'string' ? [props.modelValue] : props.modelValue);



// 删除按钮
const deleteImage = (index: number) => {
    console.log(index);
}
const handleChange = (e: Event) => {

    const file = (e.target as HTMLInputElement)?.files;
    if (!file) return;
    const reader = new FileReader();
    reader.onload = (e) => {
        const newImageList = getAllImageList.value.concat([e.target?.result as string]);
        emit('update:modelValue', newImageList);
    }
    reader.readAsDataURL(file[0]);
}
 // 裁剪功能
// const uploadResult = ({ cutW, cutH, cutX, cutY }) => {
//     const cvs = document.createElement('canvas');
//     const ctx = cvs.getContext('2d');
//     cvs.width = 200;
//     cvs.height = 200;
//     ctx?.drawImage(img, cutX, cutY, cutW, cutH, 0, 0, cutW, cutH);
//     cvs.toBlob((blob) => {
//         const file = new File([blob], 'image.png', { type: 'image/png' });
//         // 上传图片
//         console.log(file);
//     })

// }


</script>

<template>
    <div class="upload-image-container">
        <!-- 图片预览区 -->
        <div class="image_preview">
            <!-- 图片上传 -->
            <div class="image_upload">
                <input type="file" @change="handleChange($event)" />
                <span>+</span>
                <p>上传图片</p>
            </div>
            <!-- 图片列表 -->
            <div class="image_list">
                <ul class="list">
                    <li v-for="(image, index) in getAllImageList" :key="index">
                        <img :src="image" alt="" title="">
                        <span class="delete" @click="deleteImage(index)">
                            <el-icon>
                                <CircleClose />
                            </el-icon>
                        </span>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 图片属性区 -->
        <div class="line"></div>
        <div class="image_attr">
            <h4 class="t">样式</h4>

            <h4 class="t">配置</h4>
        </div>


    </div>


</template>





<style lang="scss" scoped>
.upload-image-container {
    width: 100%;
    display: flex;
    justify-content: space-between;

    .image_preview {
        display: inline-block;
        padding-right: 6%;

    }
    .image_upload {
        width: 120px;
        height: 120px;
        border: 1px dashed #eee;
        position: relative;
        cursor: pointer;

        input {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            z-index: 1;
            cursor: pointer;
        }

        span {
            position: absolute;
            top: 50%;
            left: 50%;
            font-size: 50px;
            transform: translate(-50%, -50%);
            text-align: center
        }

        p {

            position: absolute;
            left: 50%;
            bottom: 5px;
            width: 100%;
            font-size: 12px;
            text-align: center;
            transform: translateX(-50%)
        }

    }
    .image_list ul {
        display: inline-block;
    }
    .image_list li {
        width: 120px;
        height: 120px;
        position: relative;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;

        }
        span {
            position: absolute;
            top: 0;
            right: 0;
            font-size: 20px;
            color: #999;
            cursor: pointer;
            opacity: 0;
            transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
        }
        &:hover span{
            opacity: 1;


        }
    }
    .line {
        width: 1px;
        height: 100%;
        background-color: #e0e0e0;
        display: inline-block;
        vertical-align: middle;
    }
    .image_attr {
        display: inline-block;
        vertical-align: middle;
        width: 100%;
        height: 100%;

    }
}
</style>